<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="我的评价" :showAddBtn="false">
      <div class="columnFlex">
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <van-swipe-cell v-for="val in listData" :key="val.orderNo">
                <div class="cellContent" @click="handleDetail(val)">
                  <div class="top">
                    <div class="flexTit">
                      <div class="title">
                        {{ val.orderNo }}
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="flex">
                      <p>
                        <span class="label">商品名称：</span>
                        {{ val.goodsName }}
                      </p>
                    </div>
                    <p>
                      <span class="label">评价人名称：</span>
                      {{ val.commentUserName }}
                    </p>
                    <p>
                      <span class="label">描述相符评分：</span>
                      <van-rate v-model="val.descMatchRating" readonly />
                    </p>
                    <p>
                      <span class="label">评价内容：</span>
                      {{ val.commentContent }}
                    </p>
                    <p>
                      <span class="label">评价时间：</span>
                      {{ val.commentTime }}
                    </p>
                  </div>
                </div>
                <template #right>
                  <van-button
                    square
                    text="追评"
                    type="primary"
                    class="action-button"
                    @click="addDetail(val)"
                  />
                </template>
              </van-swipe-cell>
            </van-list>
            <van-empty
              v-if="!loading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      label=""
      :editType="'detail'"
      :isShowEdit="false"
      :showSave="false"
      @handleClose="fullscreenModal = false"
    >
      <detail ref="detailRef"></detail>
    </fullscreenModal>

    <!-- 评价内容 -->
    <van-dialog
      v-model="showModal"
      title="追加评价"
      show-cancel-button
      :beforeClose="handleSave"
    >
      <van-field
        v-model="remark"
        rows="5"
        type="textarea"
        maxlength="256"
        placeholder="请输入评价内容"
        show-word-limit
      />
    </van-dialog>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import { queryFileList } from "@/api/common";
import {
  commentPage,
  commentGet,
  saveGoodsAddComment,
} from "@/api/srvAssurance/shoppingMall/appraise";
import detail from "./detail";
export default {
  components: { detail },
  data() {
    return {
      formData: {
        pageNum: 1,
        pageSize: 20,
      },
      remark: "",
      commentId: "",
      loading: false,
      finished: false,
      showModal: false,
      refreshLoading: false,
      fullscreenModal: false,
      totalPage: 0, //总页数
      listData: [], // 列表数据
      currentParam: {}, // 保存当前查看详情的row数据
    };
  },
  mounted() {
    this.getSearch();
  },
  methods: {
    // 获取表格数据
    getSearch() {
      this.loading = true;
      commentPage(this.formData)
        .then((res) => {
          this.loading = false;
          if (res.code === 1000 && res.data) {
            res.data.records.forEach((item, i) => {
              item.descMatchRating = Number(item.descMatchRating);
            });
            this.listData = [...this.listData, ...res.data.records];
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    // 重置
    handleReset() {
      this.formData = {
        pageNum: 1,
        pageSize: 20,
      };
      this.onRefresh();
    },
    // 查看详情
    async handleDetail(param) {
      this.fullscreenModal = true;
      var detailInfo = [];
      let item = param;
      this.currentParam = param;
      this.loading = true;
      let res = await commentGet(param.commentId);
      if (res.status == "1000" && res.data) {
        item = res.data;
        this.currentParam = res.data;
      }
      this.loading = false;
      detailInfo = [
        {
          title: "商品名称",
          prop: "goodsName",
          value: item.goodsName,
        },
        {
          title: "评价人名称",
          prop: "commentUserName",
          value: item.commentUserName,
        },
        {
          title: "描述相符评分",
          prop: "descMatchRating",
          value: item.descMatchRating,
        },
        {
          title: "评价时间",
          prop: "commentTime",
          value: item.commentTime,
        },
        {
          title: "评价内容",
          prop: "commentContent",
          value: item.commentContent,
        },
        {
          title: "追评时间",
          prop: "addCommentTime",
          value: item.addCommentTime,
        },
        {
          title: "追评内容",
          prop: "addCommentContent",
          value: item.addCommentContent,
        },
        {
          title: "商家回复时间",
          prop: "replyTime",
          value: item.replyTime,
        },
        {
          title: "商家评价回复",
          prop: "replyContent",
          value: item.replyContent,
        },
      ];
      this.$refs.detailRef.getData(detailInfo, item);
      let arr = [];
      if (item.commentPicFileCodes) {
        queryFileList(item.commentPicFileCodes).then((res) => {
          if (res.code === 1000 && res.data) {
            arr.unshift({
              title: "评价图片",
              value: [...res.data],
            });
          }
        });
      }
      this.$refs.detailRef.getFileData(arr);
    },

    addDetail(param) {
      this.remark = "";
      this.commentId = param.commentId;
      this.showModal = true;
    },
    handleSave(action, done) {
      if (action === "confirm") {
        done(false);
        if (!this.remark) {
          this.$Notify({ type: "warning", message: "请输入评价内容" });
          return;
        }
        this.loading = true;
        let data = {
          commentId: this.commentId,
          addCommentContent: this.remark,
        };
        saveGoodsAddComment(data)
          .then((res) => {
            if (res.code == "1000") {
              this.$Notify({ type: "success", message: "保存成功！" });
              this.showModal = false;
              this.loading = false;
              this.onRefresh();
            }
          })
          .catch(() => {
            this.showModal = false;
            this.loading = false;
          });
      } else {
        done();
      }
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      float: left;
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
      clear: both;
    }
    .other {
      margin: 1px;
      text-align: right;
      font-size: 13px;
      float: right;
    }
  }
  .flex {
    clear: both;
  }
}
</style>
